<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <input type="text" id='num1'>
 <select id='operator'>
   <option value="+">+</option>
   <option value="-">-</option>
   <option value="*">*</option>
   <option value="/">/</option>
</select>
 <input type="text" id='num2'>
<button type="" id='btn'>=</button>
 <input type='text' id='output' value="">  
 <script>
  btn.onclick=function(){
     var num=0;
     //1.获取第一个输入框的值
     var num1=document.getElementById("num1").value;
     //2.获取第二个输入框的值
     var num2=document.getElementById("num2").value;
     //3.获取下拉列表中的运算符
     var operator=document.getElementById("operator").value;
     //4.获取通过下拉框来选择的值来改变加减乘除的运算法则
     var num1=Number(num1);
     var num2=Number(num2);
     if(!(isNaN(num1) && isNaN(num2))){
     if(operator=="+"){
     num=num1+num2;
     }else if(operator=="-"){
     num=num1-num2;
     }else if(operator=="*"){
     num=num1*num2;
     }else if(operator=="/"){
     num=num1/num2;
     }
     else{
     alert("请输入数字");
     }

     //设置结果输入框的值    
     document.getElementById("output").value=num;
     }
  }
 </script>
</body>
</html>